//
//  map.swift
//  WuZhen
//
//  Created by 今安在 on 2024/3/26.
//

import SwiftUI

struct map: View {
    @State var showSheet : [Bool] = [false,false,false,false,false,false,false]
    @State var imageName : [String] = ["mapIamge6","mapIamge2","mapIamge8","mapIamge4","mapIamge7","mapIamge1","mapIamge3"]
    @State var titleName : [String] = ["白莲塔","月老庙","昭明书院","囍庆堂","水上集市","叙昌酱园","木心美术馆"]
    @State var textName : [String] = [
        "       白莲塔，原称金莲塔院，后称白莲塔寺，取白莲花之意，建于北宋崇宁年间（1102—1106年）。白莲塔是阁式塔，外观呈梭状，高有七级，塔高51.75米，为乌镇古镇最高建筑。",
        
    "       乌镇月老庙，位于乌镇西栅景区内，地处龙形田的西北角，是一处不大起眼的土庙建筑。走进庙内，月老坐在正当中。月老是汉族民间传说中主管婚姻的红喜神。乌镇月老庙虽然门脸低调，但内部相当直截了当：参拜处立着明码标价的“套餐”；求完签之后按工作人员指引到收银台，收银员兼做解签大师：“愿天下有情人，都成了眷属；是前生注定事，莫错过姻缘。”",
        
        "       书院坐北朝南，半回廊二层硬山式古建筑群。主楼为图书馆，收藏有文化、社会科学、艺术、休闲旅游等方面的图书和杂志可供阅览，并设有电子阅览室、讲堂、书画、教室等。中为校文台，为著述编校之处。前方庭园中有四眼水池，四周古木参天，浓荫匝地。正门入口有明朝万历年间（1573-1620）建立的一座石牌坊，高3.75米，面宽3.8米，上题“六朝遗胜”，龙凤板上为刑科给事中，里人沈士茂题写的“梁昭明太子同沈尚书读书处”字样。",
        
        "       坐落在西栅老街上的“囍庆堂”，是一个专门展示江南民间婚姻娶嫁、喜庆礼仪的大型婚俗喜庆礼堂，由上下两层4开4进八个古厅堂组成，内设：前堂、婚礼堂、议事堂、轿厅、后堂、三尊堂、彩楼、洞房、后花园，以及展示旧时婚礼习俗的嫁妆、摆设、道具、随行、服饰、珠冠、披挂、喜船、囍贴、吹打班子等。游客可以在馆内体验原汁原味的旧时江南婚礼，并亲身参与到这一古典婚礼中。馆内设有古装体验、快照拍摄、剪纸等游客互动体验项目，真正领略旧时人们把结婚称之为“小登科”的个中滋味。",
        
        "       一大清早，小船载着新鲜的蔬菜和家养禽畜，来到四通八达的河道枢纽出售，顺便也可喝个早茶。临河的居民只要吆喝一声，船就会摇到水阁边，不出门也可以买到新鲜的蔬菜，很受居民喜欢，所以至今仍兴盛不衰。",
        "       叙昌酱园建于清咸丰九年（1859年），是乌镇有史以来早的酱园。一走进酱园的院子，就能闻到一股浓郁的酱菜香味，满院子青灰色的酱缸上扣着竹编的大斗笠，是摄影师镜头下叙昌酱园的标准写照。古老的传统酿制方法、有自己品牌的作坊、一排排露天的酱缸，大概是叙昌吸引游人眼球的地方。酱缸的身上印有“叙昌酱园”、“咸丰九年”的字样，更让人能感受到这里的百年历史。",
        "       木心美术馆是在浙江省嘉兴市桐乡市民政局注册登记的民办非企业单位，该馆致力于纪念和展示画家、作家木心先生（1927-2011）的毕生心血与美学遗产。这不仅是一座收藏过去时的美术馆，而且是向未来开放的精神指向和学术空间。美术馆坐落于木心的故乡乌镇，为木心的研究提供了完整的文献。现馆长为陈丹青。2016年，木心美术馆入选世界建筑节2016文化类建筑奖项提名。"
    ]
    
    var body: some View {
        Image("Map")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .navigationTitle("地图")
            .ignoresSafeArea()
            .overlay(mappinView(showSheet: $showSheet[0]).position(x: 212, y: 108))//白莲塔
            .overlay(mappinView(showSheet: $showSheet[1]).position(x: 220, y: 293))//月老庙
            .overlay(mappinView(showSheet: $showSheet[2]).position(x: 122, y: 500))//昭明书院
            .overlay(mappinView(showSheet: $showSheet[3]).position(x: 120, y: 555))//囍庆堂
            .overlay(mappinView(showSheet: $showSheet[4]).position(x: 105, y: 603))//水上集市
            .overlay(mappinView(showSheet: $showSheet[5]).position(x: 105, y: 655))//叙昌酱园
            .overlay(mappinView(showSheet: $showSheet[6]).position(x: 265, y: 575))//木心美术馆
        
            .sheet(isPresented: $showSheet[0],content: {MappinViewContent(photoName: imageName[0],textTitle: titleName[0],textContent: textName[0])})
        
            .sheet(isPresented: $showSheet[1], content: {MappinViewContent(photoName: imageName[1],textTitle: titleName[1],textContent: textName[1])})
        
            .sheet(isPresented: $showSheet[2], content: {MappinViewContent(photoName: imageName[2],textTitle: titleName[2],textContent: textName[2])})
        
            .sheet(isPresented: $showSheet[3], content: {MappinViewContent(photoName: imageName[3],textTitle: titleName[3],textContent: textName[3])})
        
            .sheet(isPresented: $showSheet[4], content: {MappinViewContent(photoName: imageName[4],textTitle: titleName[4],textContent: textName[4])})
        
            .sheet(isPresented: $showSheet[5], content: {MappinViewContent(photoName: imageName[5],textTitle: titleName[5],textContent: textName[5])})
        
            .sheet(isPresented: $showSheet[6], content: {MappinViewContent(photoName: imageName[6],textTitle: titleName[6],textContent: textName[6])})
    }
}

#Preview{
    map()
}

struct mappinView: View {
    @Binding var showSheet : Bool
    var body: some View {
        Button(action: {
            showSheet.toggle()
        }, label: {
            Image(systemName: "mappin.and.ellipse")
                .font(.title)
                .foregroundColor(.red)
                .shadow(radius: 20)
        })
    }
}

struct MappinViewContent: View {
    @State var photoName : String
    @State var textTitle : String
    @State var textContent : String
    @State var sliderNumber : Double = 0
    
    var body: some View {
       VStack {
           TabView {
               Image(photoName)
                   .resizable()
                   .aspectRatio(contentMode: .fill)
                   .clipped()
                   .frame(height: 300)
                   .ignoresSafeArea()
           }
           .tabViewStyle(PageTabViewStyle())
           Spacer()
           VStack(alignment: .leading) {
               HStack {
                   Image(systemName: "location.circle")
                       .foregroundColor(.blue)
                       .font(.headline)
                   Text(textTitle)
                       .font(.title)
               }
               Text(textContent)
                   .padding(.top,5)
               HStack {
                   threeLianViewContentView()
                   Spacer()
                   Spacer()
                   Image(systemName: "play.circle")
                       .foregroundColor(.gray)
                       .font(.headline)
                   Slider(value: Binding<Double>(
                       get: { self.sliderNumber },
                       set: { self.sliderNumber = $0 }
                   ), onEditingChanged: { _ in })
                   Text("02:16")
                   Image(systemName: "airpodspro")
               }
               .padding(.top)
               
           }
           .foregroundColor(.primary)
           .padding()
           .background(.ultraThinMaterial)
           .cornerRadius(10)
       }
    }

}

struct threeLianViewContentView: View {
    
    @State var isLike : Bool = false
    @State var isStar : Bool = false
    @State var isShare : Bool = false
    
    var body: some View {
        HStack{
            Button(action: {
                isLike.toggle()
            }, label: {
                Image(systemName: isLike ?"heart.fill" :"heart")
                    .foregroundColor(.pink)
            })
            
            Button(action: {
                isStar.toggle()
            }, label: {
                Image(systemName: isStar ?"star.fill" :"star")
                    .foregroundColor(.yellow)
            })
            
            Button(action: {
                isShare.toggle()
            }, label: {
                Image(systemName: isShare ?"square.and.arrow.up.fill":"square.and.arrow.up")
                    .foregroundColor(.green)
                    .contextMenu(ContextMenu(menuItems: {
                        Button(action: {
                            isShare.toggle()
                        }, label: {
                            Label("分享微信",systemImage: "message")
                        })
                        Button(action: {
                            isShare.toggle()
                        }, label: {
                            Label("分享到朋友圈",systemImage: "circle.hexagongrid.circle")
                        })
                        Button(action: {
                            isShare.toggle()
                        }, label: {
                            Label("分享到抖音",systemImage: "music.note")
                        })
                        Button(action: {
                            isShare.toggle()
                        }, label: {
                            Label("分享到邮件",systemImage: "envelope")
                        })
                        
                    }))
            })
        }
    }
}
